<template>
    <div class="container">
        <div style="display: flex;">
            <div style="padding-right: 10px;cursor: pointer;" @click="handleReturn"><el-icon>
                    <ArrowLeftBold style="margin-top: 18px;" />
                </el-icon></div>
            <div class="title">质量检验详情清单</div>
        </div>
        <!-- 操作按钮区域 -->
        <div class="button-group">
            <xcmg-button @click="handleDerive">
                <svg-icon name="upload-line" />
                <div class="spacer"></div>
                导出
            </xcmg-button>
        </div>
        <!-- 数据表格区域 -->
        <div class="table-container">
            <xcmg-table :data="tableData" v-loading="loading"  height="100%" style="width: 100%" border>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <el-link type="primary" @click="handleSkip(scope.row)">{{ scope.$index + 1 }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="materialCode" label="物料编码" min-width="100" show-overflow-tooltip />
                <el-table-column prop="designCategory" label="设计分类" min-width="100" show-overflow-tooltip />
                <el-table-column prop="materialType" label="物料类型" min-width="100" show-overflow-tooltip />
                <el-table-column prop="netWeight" label="净重" width="100" show-overflow-tooltip />
                <el-table-column prop="netWeightStandard" label="净重标准值" min-width="100" show-overflow-tooltip />
                <el-table-column prop="netWeightRecommended" label="净重推荐值" min-width="100" show-overflow-tooltip />
                <el-table-column prop="materialRepeatStatus" label="物料重复状态" min-width="100" show-overflow-tooltip />
                <el-table-column prop="ruleComplianceStatus" label="规则规范状态" min-width="100" show-overflow-tooltip />
            </xcmg-table>
        </div>

        <div class="fixed-pagination">
            <xcmg-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200, 500]" :total="total" background
                layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' // 引入路由
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { SvgIcon } from 'xcmg-components'

const router = useRouter() // 获取路由实例
const loading = ref(false)

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)


const formModel = reactive({
    materialCode: '',
    designCategory: '',
    materialType: '',
    netWeight: '',
    netWeightStandard: '',
    netWeightRecommended: '',
    materialRepeatStatus: '',
    ruleComplianceStatus: ''
})

const tableData = ref<any[]>([])

const designOptions = [
    { value: 'type1', label: '类型一' },
    { value: 'type2', label: '类型二' }
]

// 分页变化处理
const handleSizeChange = (size: number) => {
    pageSize.value = size
    fetchTableData()
}

const handleCurrentChange = (page: number) => {
    currentPage.value = page
    fetchTableData()
}

// 返回上一页
const handleReturn = () => {
    router.go(-1) // 返回上一页路由
}

// 获取表格数据
const fetchTableData = async () => {
    try {
        loading.value = true
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 800))

        // 模拟数据
        tableData.value = [
            {
                materialCode: 'MAT-001',
                designCategory: '结构件',
                materialType: '钢材',
                netWeight: '25.5kg',
                netWeightStandard: '25.0-26.0kg',
                netWeightRecommended: '25.5kg',
                materialRepeatStatus: '无重复',
                ruleComplianceStatus: '合规'
            },
            {
                materialCode: 'MAT-002',
                designCategory: '电气件',
                materialType: '电缆',
                netWeight: '3.2kg',
                netWeightStandard: '3.0-3.5kg',
                netWeightRecommended: '3.2kg',
                materialRepeatStatus: '部分重复',
                ruleComplianceStatus: '待审核'
            },
            {
                materialCode: 'MAT-003',
                designCategory: '液压件',
                materialType: '油管',
                netWeight: '1.8kg',
                netWeightStandard: '1.5-2.0kg',
                netWeightRecommended: '1.8kg',
                materialRepeatStatus: '无重复',
                ruleComplianceStatus: '合规'
            },
            {
                materialCode: 'MAT-004',
                designCategory: '结构件',
                materialType: '铝材',
                netWeight: '12.3kg',
                netWeightStandard: '12.0-12.5kg',
                netWeightRecommended: '12.3kg',
                materialRepeatStatus: '完全重复',
                ruleComplianceStatus: '不合规'
            },
            {
                materialCode: 'MAT-005',
                designCategory: '电气件',
                materialType: '控制器',
                netWeight: '0.95kg',
                netWeightStandard: '0.9-1.0kg',
                netWeightRecommended: '0.95kg',
                materialRepeatStatus: '无重复',
                ruleComplianceStatus: '合规'
            }
        ]
    } catch (error) {
        console.error('获取数据失败:', error)
    } finally {
        loading.value = false
    }
}

const handleSkip = (row: any) => {
    console.log('点击了行数据:', row)

    router.push({
        path: '/qualityTestRepeat',
        query: {
            designCategory: row.designCategory,
            materialType: row.materialType,
            materialCode: row.materialCode
        }
    })
}

const handleDerive = () => {
    console.log('导入按钮点击')
}

// 初始化数据
onMounted(() => {
    fetchTableData()
})
</script>

<style scoped>
.container {
  padding: 20px;
  height: calc(100vh - 64px - 56px - 40px);
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: bold;
  font-size: 20px;
}

.button-group {
  padding: 16px 0;
  display: flex;
  gap: 12px;
}
.spacer {
  width: 8px;
}

/* 表格容器：占据剩余空间 */
.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 表格：允许滚动，限制最大高度 */

.fixed-pagination {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
}

:deep(.el-form-item__content) {
    justify-content: flex-end;
}
</style>